<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作  元素以及元素内容的部分
		     .html()   无参---功能：获取匹配元素中第一个元素的内容
			           有参---功能：【设置】将匹配的元素集合中所有元素替换为新元素
			特点：内容  +  元素		   
			
			 .val()    无参---功能：表单内元素  input，select生效
			                       获取表单元素中第一个元素内容
					   有参---功能: 【设置】表单内元素：input，select生效		   
			                       input元素直接显示  value
			                       select元素不是显示
								   option 元素中内容：用户显示
								   option 元素中value值 必须当前select中，option元素value值
								   直接赋值：打印select元素对象名称[object Object]
			  特点：针对 【表单内form元素可以包裹】 元素的内容 
			
			 .text()     无参--功能： 获取匹配元素集合中所有元素的文本内容
			             
						 有参--功能：【设置】匹配元素集合中所有元素的文本内容替换
			   特点：元素中存在内容			 
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button>按钮-针对html()函数-有参</button>
		<span>每当想起你时</span>
		<span>这世界有那么多人</span>
		
		<h1>val()函数使用</h1>
		<button>按钮-针对val()函数</button>
		<input type="text" value="也无风雨也无晴"/>
		<input type="text" value="道是无晴却有晴"  placeholder="输入框显示效果"/>
		<button>按钮-针对</button>
		<select>
			<option value="每当想起你时">苏星婕</option>
			<option value="这世界有那么是多人">合唱</option>
			<option value="红色高跟鞋">蔡健雅</option>
		</select>
		
		<h1>text()函数使用</h1>
		<button class="btn1">按钮-针对text()函数-无参</button>
		<button class="btn2">按钮-针对text()函数-有参</button>
		<p>黑</p>
		<p>哈</p>
		<p>呼</p>
		<script>
			$(".btn1").click(function(){
				var perfer=$("p").text();
			   alert(perfer);
			});
			$(".btn2").click(function(){
				$("p").text("修改文本");
			});
			
			
			//动态效果：点击按钮 获取第一个表单元素的内容，打印出来
		/* 	$("button").click(function(){
				 //注意：js变量名不可一为关键字  in是关键字 
				var ins=$("input").val();
				alert("val()函数无参:"+ins);
			}); */
			
			   //$("button").click(function(){
				/* 设置元素第一个的值 1.直接设置下拉列表中value的值 */
				/*$("select").val("每当想起你时");
				//2.给第一个值添加，设置的内容
				var rem=$("select").val();
				alert(rem); */
				//[object Object]javaScript中  对象的 默认字符串表示形态
				//select元素 对象输出[object Object]
				//value的值  真实数据 option中值：显示数据
				//object Object  测试：无参
			//});
			
			//js变量【var i=1】==jq变量
			//无参数   html()函数使用
			/* var html=$("span").html();
		       BOM方式 打印数据
			alert("无参数获取第一个元素内容"+html); */
			/* 有参 html函数使用 */
		/* 	$("button").click(function(){
				$("span").html("篝火旁");
			}); */
			
			
		</script>
	</body>
</html>